VChart 1.13.0
Tutorials
Contributing
Options
API
FAQ
Themes 🌼
Changelogs
Online Customization
Playground
VChart Story Teller

Not only an out-of-the-box multi-terminal chart library, but also a vivid and flexible data storyteller.

VTable Checkered Artist

Not only a high-performance multi-dimensional data analysis form, but also a grid artist created between rows and columns.

VGrammar Data Magician

It is not only a visual grammar that generates thousands of charts, but also a data magician who turns boring into magic.

VRender Visual Rendering

Not only a visual rendering engine with rich functions, but also a handy pen.

VMind Smart Visualization Suit

Not just automatic, but also fantastic.

VStory Relationship Explorer plus

It is not only a fully functional graph visualization library, but also an explorer of data relationships.

!!!###!!!title=188- In vchart, how to set the legend not to follow gradient colors and draw legends with rounded rectangles——VisActor/VChart FAQ documents!!!###!!!!!!###!!!description=---title: In vchart charts, how do I set the legend not to follow the gradient color and draw a rounded rectangle legend?</br>key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM--- !!!###!!!

Question Title

In vchart charts, how do I set the legend not to follow the gradient color and draw a rounded rectangle legend?

Question Description

I am using vchart to make charts and have encountered two issues that I would like to ask everyone. My area chart style has been adjusted to a gradient color, but I don't want the legend color to follow the gradient of the area chart, how should I set it?

In addition, I did not find in the information that the legend shape provides a rounded rectangle option, is there any other plan to implement the drawing of rounded rectangles?

Solution

Hello, these two problems can be solved through configuration.

If you don't want the legend color to follow the gradient of the area chart, you can change the color of the main mark of the series by configuring the seriesMark.
seriesMark: 'point',
As for how to draw legends of rounded rectangles, you can set the symbolType graphic attribute of legend graphics by configuring it. The specific setting content is as follows:

item:{
shape:{
style:{
symbolType:"M 462 282 c 0 99.405 -80.595 180 -180 180 h -540 c -99.405 0 -180 -80.595 -180 -180 v -540 c 0 -99.405 80.595 -180 180 -180 h 540 c 99.405 0 180 80.595 180 180 v 540 z"
}
}
}</br>

Result Show

Online demo: https://codesandbox.io/p/sandbox/line-chart-hover-forked-t74cvw?file=%2Fsrc%2Findex.ts%3A66%2C13

Related Documentation